<template>
  <div>
    <div class="main_content">
      <el-button type="success" @click="addBig()">新增大类</el-button>
      <el-tree
        ref="tree"
        style="width:60%;margin-top:10px;"
        :data="allList"
        accordion
        node-key="goodstype_id"
        :default-expanded-keys="theKeys"
        :expand-on-click-node="false"
        :props="defaultProps"
        @node-expand="handleNodeExpand"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>
            <span v-if="data.goodsType.length>0">
              <i class="fa fa-folder" aria-hidden="true"></i>
            </span>
            <span>{{node.label}}</span>
          </span>
          <span>
            <el-button size="mini" @click="addOne(node, data)">新增</el-button>
            <el-button type="primary" size="mini" @click="editOne(node, data)">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteOne(node,data)">删除</el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      theKeys: [],
      defaultProps: {
        children: "goodsType",
        label: "goodstype_name"
      },
      allList: [
        {
          goodstype_id: 1,
          goodstype_name: "临时食宿",
          hierarchy: 0,
          goodstype_number: null,
          level: 1,
          top_limit: null,
          floor_limit: null,
          waring_time: null,
          goodsType: [
            {
              goodstype_id: 4,
              goodstype_name: "饮用水",
              hierarchy: 1,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 10,
                  goodstype_name: "瓶装水",
                  hierarchy: 4,
                  goodstype_number: "040101",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            },
            {
              goodstype_id: 5,
              goodstype_name: "食品",
              hierarchy: 1,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 11,
                  goodstype_name: "罐头",
                  hierarchy: 5,
                  goodstype_number: "040202",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            }
          ]
        },
        {
          goodstype_id: 2,
          goodstype_name: "防护用品",
          hierarchy: 0,
          goodstype_number: null,
          level: 1,
          top_limit: null,
          floor_limit: null,
          waring_time: null,
          goodsType: [
            {
              goodstype_id: 6,
              goodstype_name: "卫生防疫",
              hierarchy: 2,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 12,
                  goodstype_name: "防护服",
                  hierarchy: 6,
                  goodstype_number: "010101",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            },
            {
              goodstype_id: 7,
              goodstype_name: "消防",
              hierarchy: 2,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 13,
                  goodstype_name: "防火服",
                  hierarchy: 7,
                  goodstype_number: "010301",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                },
                {
                  goodstype_id: 14,
                  goodstype_name: "头盔",
                  hierarchy: 7,
                  goodstype_number: "010302",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            }
          ]
        },
        {
          goodstype_id: 3,
          goodstype_name: "生命救助",
          hierarchy: 0,
          goodstype_number: null,
          level: 1,
          top_limit: null,
          floor_limit: null,
          waring_time: null,
          goodsType: [
            {
              goodstype_id: 8,
              goodstype_name: "救生",
              hierarchy: 3,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 15,
                  goodstype_name: "救生圈",
                  hierarchy: 8,
                  goodstype_number: "020101",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                },
                {
                  goodstype_id: 16,
                  goodstype_name: "救生衣",
                  hierarchy: 8,
                  goodstype_number: "020102",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                },
                {
                  goodstype_id: 17,
                  goodstype_name: "救生艇(筏)",
                  hierarchy: 8,
                  goodstype_number: "020103",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            },
            {
              goodstype_id: 9,
              goodstype_name: "掩埋",
              hierarchy: 3,
              goodstype_number: null,
              level: 2,
              top_limit: null,
              floor_limit: null,
              waring_time: null,
              goodsType: [
                {
                  goodstype_id: 1000002,
                  goodstype_name: "生物传感器",
                  hierarchy: 9,
                  goodstype_number: "020202",
                  level: 3,
                  top_limit: null,
                  floor_limit: null,
                  waring_time: null,
                  goodsType: []
                }
              ]
            }
          ]
        }
      ]
    };
  },
  components: {},
  methods: {
    addBig() {},
    addOne(node, data) {},
    editOne(node, data) {},
    deleteOne(node, data) {},
    handleNodeExpand(event) {
      this.theKeys = [];
      this.theKeys.push(event.goodstype_id);
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>


